<template>
  <div class="topTotal flex-align-between">
    <div class="totalBox flex-align-between">
      <!-- <div class="iconBox"><img src="~@/assets/images/total.png" /></div> -->
      <div class="totalInfo">
        <div class="tit-1">资源总量</div>
        <div class="totalNun">{{tatolInfo.videoCount}}</div>
        <div class="totalTip">*总个数(多集记为一)</div>
      </div>
    </div>
    <div class="totalList">
      <div class="totalRow" v-for="(item,index) in typeList" :key="index" :style="{width:typeWidth}" >
        <div class="totalChat">
          <el-progress type="circle" :percentage="Number(item.proportion * 100)" :stroke-width='35' :show-text='false'
            :color='colors[index]' stroke-linecap='butt' :define-back-color='defineColor[index]'></el-progress>
        </div>
        <div class="torInfo">
          <a>{{item.synthesisName}}总数</a>
          <div class="torNum">{{item.videoCount}}<span class="torTip"
              :style="{background:defineColor[index],color:colors[index]}">{{(Number(item.proportion)*100).toFixed(1)}}%</span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {
        typeList: [],
        tatolInfo:'',
        typeWidth: '',
        colors: ['#24d6e2', '#2a61ff', '#f17742', '#fdc34c', '#c40001', '#3bad4c', '#6f2ddf', '#f4afe8'],
        defineColor: ['rgba(36, 214, 226, 0.15)', 'rgba(42, 97, 255, 0.15)', 'rgba(241, 119, 66, 0.15)',
          'rgba(253, 195, 76, 0.1)', 'rgba(196, 0, 1, 0.1)', 'rgba(59, 173, 76, 0.1)', 'rgba(111, 45, 223, 0.1)',
          'rgba(244, 175, 232, 0.1)'
        ],
      };
    },
    created() {
      this.init()
    },

    methods: {
      //获取首页数据
      init() {
        var that = this
        pageLibrary().then(response => {
          var data = response.data.synthesisList;
          this.tatolInfo = data[0];
          data.shift();
          //进度条赋0动画
          for (var i = 0; i < data.length; i++) {
            var obj = {
              synthesisName:data[i].synthesisName,
              videoCount:data[i].videoCount,
              proportion:0,
            }
            that.typeList.push(obj)
          }
          setTimeout(function() {
            that.typeList = data;
            that.$forceUpdate()
          }, 250)
          var num = that.typeList.length
          that.typeWidth = 'calc((100% - 20px) / ' + num + ')';

        });
      },
    },
  };
</script>

<style scoped lang="scss">
  .tit-1 {
    font-size: 16px;
    color: #15274d;
    font-weight: bold;
  }
  .topTotal {
    width: 100%;
    height: 120px;

    .totalBox {
      width: 300px;
      border-radius: 15px;
      overflow: hidden;
      color: #1b3567;
      height: 100%;
      box-shadow: 10px 0px 10px -7px rgba(0, 0, 0, 0.2);
      background: #24d6e2;
      padding: 0 20px;
      position: relative;

      .iconBox {
        height: 80px;
        width: 40px;display: flex;align-items: center;justify-content: center;
        background: #fff;
        border-radius: 30px;
        img{width: 30px;height: 30px;}
      }

      .totalInfo {
        width: calc(100% - 60px);

        .totalNun {
          padding: 12px 0;
          font-size: 30px;
        }

        .totalTip {
          position: absolute;
          font-size: 12px;
          right: 10px;
          bottom: 5px;
        }
      }
    }

    .totalList {
      width: calc(100% - 320px);
      height: 100%;
      display: flex;
      align-items: center;
      align-items: center;
      justify-content: space-between;
      border-radius: 15px;
      background: #fff;
      overflow: hidden;
      padding: 0 5px;

      .totalRow {
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;

        .torInfo {
          display: flex;
          align-items: flex-start;
          justify-content: center;
          flex-direction: column;
          margin-left: 8px;

          a {
            font-size: 13px;
            color: #999
          }

          .torNum {
            padding-top: 10px;
            color: #15274d;
            font-size: 24px;
            letter-spacing: 1px;

            .torTip {
              font-size: 12px;
              margin-left: 5px;
              padding: 0 8px;
              border-radius: 30px;
              letter-spacing: 0;
            }
          }
        }

        .totalChat {
          width: 60px;
          height: 60px;
        }
      }
    }
  }

  // 定义动画
  .el-progress-bar__inner:before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0, rgba(255, 255, 255, 0.3) 12.5%, transparent 0, transparent 25%);
    background-size: 80px 80px;
    animation: move 2.5s linear infinite;
  }

  @keyframes move {
    from {
      background-position: 80px 0;
    }

    to {
      background-position: 0;
    }
  }
</style>
